<template>
	<view class="title_image">
		<image :class="loading==true?'load-fade':''" :style="imgstyle" @load="loadingSuccess" @error="loadingerror" :src="src" :mode="mode"></image>
		<view class="loading_icon" v-if="showLoading && !loading">
			<view class="circle" :style="formatLoadingColor"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 路径
			src: {
				type: String,
				default: 'https://q0.itc.cn/q_70/images03/20240315/b5d97df2e80d4742b8805610a0c1c84f.jpeg'
			},
			//图片 mode
			mode: {
				type: String,
				default: 'widthFix'
			},
			//样式
			imgstyle: {
				type: String,
				default: 'width: 100%;'
			},
			//是否显示加载动画
			showLoading: {
				type: Boolean,
				default: true
			},
			//加载动画颜色
			loadingColor: {
				type: String,
				default: '#5fadcb'
			}
		},
		computed: {
			formatLoadingColor() {
				return 'border-top-color:' + this.loadingColor;
			}
		},
		name: "HBImage",
		data() {
			return {
				loading: false,
			};
		},
		methods: {
			loadingSuccess() {
				this.loading = true;
			},
			loadingerror(){
				this.loading = true;
				console.log(this.src,'图片加载失败');
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 淡入效果
	.load-fade {
		opacity: 1;
		animation: fade 1s linear normal;
	}


	.title_image {
		width: 100%;
		height: 100%;
		// background-color: skyblue;
		position: relative;
		.loading_icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}

	.circle {
		box-sizing: border-box;
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		border: 5rpx solid #f3f3f3;
		border-top: 5rpx solid;
		border-radius: 50%;
		animation: rotate-360 1s infinite linear;
	}
	image{
		display: block;
	}
	@keyframes rotate-360 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
	@keyframes fade {
		from {
			opacity: 0
		}
	
		to {
			opacity: 1
		}
	}
</style>